<template>
  <img :src="displayImage" :alt="alt" :class="{ 'default-image': displayImage === defaultImage }" />    
</template>
  
<script setup>
const defaultImage = '/img/default.png'

const props = defineProps({
  src: {
    type: String,
    required: true
  },
  defaultImage: {
    type: String,
    default: defaultImage
  },
  alt: {
    type: String,
    default: ''
  }
})

const displayImage = ref(props.src || props.defaultImage)

onMounted(() => {
  if (process.client) {
    const img = new Image()
    img.onload = () => {
      displayImage.value = props.src
    }
    img.onerror = () => {
      displayImage.value = props.defaultImage
    }
    img.src = props.src
  }
})
</script>

<style scoped>
/* img {
  width: 100%;
  height: 100%;
  object-fit: cover;
} */

.default-image {
  background-color: #f5f5f5;
  width: 140px !important;
  padding: 1rem;
  border-radius: 0.5rem;
}
</style>